<template>
  <div>
    <px-tabs v-model="activeWater" class="equipment-tabs" style="padding-left: 20px; background: white">
      <px-tab-pane v-for="(item, index) in tabPaneList" :key="index" :disabled="tabDisabled" :name="item.name">
        <template #label>
          <p class="pane-bottom">{{ item.label }}</p>
          <p class="pane-line" />
        </template>
      </px-tab-pane>
    </px-tabs>

    <first v-if="activeWater == 'first'" />
    <chemical v-if="activeWater == 'two'" />
    <analyze v-if="activeWater == 'three'" />
    <!-- <chemicalWW v-else /> -->
  </div>
</template>
<script setup lang="ts">
import chemicalUPW from "./chemicalUPW.vue";
import chemicalWW from "./chemicalWW.vue";
import first from "../chemicals/usageRecord/index.vue";
import analyze from "./analyze.vue";
import chemical from "./chemical.vue";
import { ref } from "vue";
const activeWater = ref("first");
const tabDisabled = ref(false);
const tabPaneList = [
  {
    label: "每日用量",
    name: "first"
  },
  {
    label: "用量统计",
    name: "two"
  },
  {
    label: "用量分析",
    name: "three"
  }
];
</script>

<style scoped lang="scss">
:deep(.px-table) {
  .px-table__cell {
    padding: 6px 0;
  }

  .px-table__header-wrapper,
  .px-table__fixed-header-wrapper {
    th {
      background-color: #e7eefb !important;
    }
  }
}
</style>
